<template>
    <mobile-top-menu :data="menuData"></mobile-top-menu>
    <div class="about-us">
        <div class="a-u-top">
            <div class="aut-content">
                <div class="ac-top">
                    <span class="aut-con">小舟從此逝，</span>
                    <span class="aut-con">江海寄餘生。</span>
                </div>
                <div class="ac-bottom">
                    <span class="author">—— [宋] 蘇軾</span>
                </div>
            </div>
        </div>
        <div class="a-u-bottom">
            <ul class="aub-ul">
                <li class="aub-li">
                    <div class="li-title">投资合作</div>
                    <div class="li-content">forestofmylife@163.com</div>
                </li>
                <li class="aub-li">
                    <div class="li-title">官方微信</div>
                    <div class="li-content">江海寄余生</div>
                </li>
                <li class="aub-li">
                    <div class="li-title">官方网站</div>
                    <div class="li-content">江海寄余生文化推荐网站</div>
                </li>
                <li class="aub-li">
                    <div class="li-title">邮件联系</div>
                    <div class="li-content">forestofmylife@163.com</div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed } from "vue"

const menuData = computed(() => {
    return {
        leftMsg: '返回',
        centerMsg: '关于我们'
    }
})
</script>

<style lang="less" scoped>
.about-us {
    position: relative;
    width: 100%;
    min-height: calc(100vh - 2.5rem);
    max-height: calc(100vh - 2.5rem);
    background-color: var(--bg-color-gray);
    overflow-y: auto;
    .a-u-top {
        height: 8rem;
        background-color: var(--bg-color-gray);
        padding: 2rem 0;
        box-sizing: border-box;
        .aut-content {
            width: 15rem;
            margin: 0 auto;
            .ac-top {
                text-align: center;
                .aut-con {
                    display: block;
                    color: var(--font-color-gray);
                    font-size: 18px;
                }
            }
            .ac-bottom {
                text-align: right;
                margin-top: 0.5rem;
                .author {
                    color: var(--font-color-gray);
                    font-size: 14px;
                }
            }
        }
    }
    .a-u-bottom {
        .aub-ul {
            background-color: var(--bg-color);
            .aub-li {
                padding: 0rem 1rem;
                height: 3.5rem;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: flex-start;
            }
        }
    }
}
</style>